<template>
  <div class="login-container">
    <el-dialog
      title="授权"
      :visible.sync="$store.state.user.AuthorizationOpen"
      width="800px"
      height="800"
      :before-close="handleClose"
    >
      <!-- 授权上传文件 -->
      <License ref="Authorization" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeOpen">取 消</el-button>
        <!-- <el-button @click="onSubmit()" type="primary">上 传</el-button> -->
        <el-button type="primary" @click="closeOpen">确 定</el-button>
      </span>
    </el-dialog>
    <div class="login-version" v-if="sysConfig && sysConfig.sysVersion">
      <p class="login-version-text">{{ sysConfig.sysVersion }}</p>
    </div>
    <div class="login-left">
      <img class="login-banner" src="@/assets/images/login-banner.png" alt />
      <div class="login-left-txt" v-if="showTxt">
        <p class="title1">
          在线自动化，可视化系统开发，零代码实现80%的基础功能
        </p>
      </div>
    </div>
    <div class="login-content">
      <div class="login-form">
        <el-image
          class="login-logo"
          :src="define.comUrl + sysConfig.loginIcon"
          v-if="sysConfig && sysConfig.loginIcon"
        >
          <template slot="error">
            <img class="login-logo" src="@/assets/images/login_logo.png" alt />
          </template>
        </el-image>
        <img
          class="login-logo"
          src="@/assets/images/login_logo.png"
          alt
          v-else
        />
        <div class="login-tab" :class="'active' + active">
          <a
            class="item"
            :class="{ active: active == 1 }"
            @click="active = 1"
            >{{ $t("login.title") }}</a
          >
          <a
            class="item"
            :class="{ active: active == 2 }"
            @click="
              active = 2;
              loadWeComQrImage();
            "
            >{{ $t("login.scanTitle") }}</a
          >
        </div>
        <el-form
          v-show="active == 1"
          ref="loginForm"
          :model="loginForm"
          :rules="loginRules"
          autocomplete="on"
          label-position="left"
        >
          <el-form-item prop="account">
            <el-input
              ref="account"
              v-model="loginForm.account"
              :placeholder="$t('login.username')"
              name="account"
              type="text"
              tabindex="1"
              autocomplete="on"
              prefix-icon="el-icon-user"
              size="large"
              @change="getConfig"
            ></el-input>
          </el-form-item>
          <el-form-item class="rule-tip">{{ $t("login.rule") }}</el-form-item>
          <el-tooltip
            v-model="capsTooltip"
            :content="$t('login.upper')"
            placement="right"
            manual
          >
            <el-form-item prop="password">
              <el-input
                ref="password"
                v-model="loginForm.password"
                show-password
                :placeholder="$t('login.password')"
                name="password"
                tabindex="2"
                autocomplete="on"
                @keyup.native="checkCapslock"
                @blur="capsTooltip = false"
                prefix-icon="el-icon-lock"
                size="large"
              ></el-input>
            </el-form-item>
          </el-tooltip>
          <el-form-item prop="code" v-if="needCode">
            <el-row type="flex" justify="space-between">
              <el-col class="sms-input">
                <el-input
                  v-model="loginForm.code"
                  :placeholder="$t('login.codeTip')"
                  name="code"
                  autocomplete="on"
                  prefix-icon="el-icon-key"
                  size="large"
                ></el-input>
              </el-col>
              <el-col class="sms-right code-right">
                <el-tooltip
                  :content="$t('login.changeCode')"
                  placement="bottom"
                >
                  <img
                    id="imgcode"
                    :alt="$t('login.changeCode')"
                    :src="define.comUrl + imgUrl"
                    @click="changeImg"
                  />
                </el-tooltip>
              </el-col>
            </el-row>
          </el-form-item>
          <el-button
            :loading="loading"
            type="primary"
            class="login-btn"
            size="large"
            @click.native.prevent="handleLogin"
            >{{ $t("login.logIn") }}</el-button
          >
        </el-form>
        <div v-show="active == 2" class="login-form-QRCode">
          <!-- <img class="qrcode-img" src="@/assets/images/login_qr.png"> -->
          <span id="qr_login" />
          <!--  <p class="qrcode-tip">正在测试,稍后上线</p> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getConfig, getQyhConfig } from "@/api/user";
import License from "./components/license.vue";
export default {
  name: "Login",
  components: {
    License,
  },
  data() {
    return {
      ifScanCode: 0,
      loginForm: {
        account: "",
        password: "",
        code: "",
        origin: "password",
      },
      loginRules: {
        account: [
          {
            required: true,
            trigger: "blur",
            message: this.$t("login.accountTip"),
          },
        ],
        password: [
          {
            required: true,
            trigger: "blur",
            message: this.$t("login.passwordTip"),
          },
        ],
        code: [
          {
            required: true,
            trigger: "blur",
            message: this.$t("login.codeTip"),
          },
        ],
      },
      imgUrl: "",
      timestamp: "",
      capsTooltip: false,
      loading: false,
      showDialog: false,
      needCode: false,
      codeLength: 4,
      redirect: undefined,
      showTxt: false,
      otherQuery: {},
      active: 1,
      QYHConfig: {},
    };
  },
  computed: {
    sysConfig() {
      return this.$store.state.settings.sysConfig;
    },
    loginLoading() {
      return this.$store.state.user.loginLoading;
    },
  },
  watch: {
    "$route.query": {
      handler(newVal, oldVal) {
        var code = this.$route.query["code"];
        // logistics
        if (code) {
          this.qywxLoginByCode(code);
        }
      },
    },

    loginLoading(val) {
      if (!val) this.loading = false;
    },
    $route: {
      handler: function (route) {
        const query = route.query;
        if (query) {
          this.redirect = query.redirect;
          this.otherQuery = this.getOtherQuery(query);
        }
      },
      immediate: true,
    },
  },
  created() {
    // 判断是否微信浏览器打开
    var ua = navigator.userAgent.toLowerCase();
    var isWeixin = ua.indexOf("micromessenger") !== -1;
    if (isWeixin) {
      const code = this.getUrlParam("code");
      if (code) {
        this.qywxLoginByCode(code);
      } else {
        this.getCode();
      }
    }
    const _this = this;
    document.onkeydown = function (e) {
      const { keyCode } = e;
      if (keyCode === 13) {
        _this.handleLogin();
      }
    };
    if (this.needCode) this.changeImg();
  },
  mounted() {
    this.$store.commit("user/SET_LOGIN_LOADING", false);
    this.setShowTxt();
    window.onresize = () => {
      this.setShowTxt();
    };
  },
  destroyed() {
    document.onkeydown = function (e) {
      const { keyCode } = e;
      if (keyCode === 13) {
      }
    };
  },
  methods: {
    setShowTxt() {
      if (document.documentElement.clientHeight <= 840) {
        this.showTxt = false;
      } else {
        this.showTxt = true;
      }
    },
    checkCapslock(e) {
      const { key } = e;
      this.capsTooltip = key && key.length === 1 && key >= "A" && key <= "Z";
    },
    getConfig(val) {
      if (!val) return;
      getConfig(this.loginForm.account).then((res) => {
        this.needCode = !!res.data.enableVerificationCode;
        if (this.needCode) {
          this.codeLength = res.data.verificationCodeNumber || 4;
          this.changeImg();
        }
      });
    },
    handleLogin() {
      if (this.loading) return;
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.loading = true;
          this.$store.commit("user/SET_LOGIN_LOADING", true);
          const query = {
            ...this.loginForm,
            timestamp: this.timestamp,
          };
          this.$store
            .dispatch("user/login", query)
            .then((res) => {
              this.$router.push({
                path: this.redirect || "/",
                query: this.otherQuery,
              });
            })
            .catch(() => {
              this.$store.commit("user/SET_LOGIN_LOADING", false);
            });
        } else {
          return false;
        }
      });
    },
    handleLoginTest(code) {
      this.loading = true;
      this.$store.commit("user/SET_LOGIN_LOADING", true);
      this.$store
        .dispatch("user/loginByWeCom", code)
        .then((res) => {
          this.$router.push({
            path: this.redirect || "/",
            query: this.otherQuery,
          });
        })
        .catch(() => {
          this.$store.commit("user/SET_LOGIN_LOADING", false);
        });
    },
    changeImg() {
      let timestamp = Math.random();
      this.timestamp = timestamp;
      this.imgUrl = `/api/oauth/ImageCode/${this.codeLength || 4}/${timestamp}`;
    },
    getOtherQuery(query) {
      return Object.keys(query).reduce((acc, cur) => {
        if (cur !== "redirect") {
          acc[cur] = query[cur];
        }
        return acc;
      }, {});
    },
    qywxLoginByCode(code) {
      this.loading = true;
      this.$store.commit("user/SET_LOGIN_LOADING", true);
      this.$store
        .dispatch("user/loginByWeCom", code)
        .then((res) => {
          this.$router.push({
            path: this.redirect || "/",
            query: this.otherQuery,
          });
        })
        .catch(() => {
          this.$store.commit("user/SET_LOGIN_LOADING", false);
        });
    },
    getCode() {
      // 获取的url动态
      var config = {
        config: "WeComConfig",
      };
      getQyhConfig(config)
        .then((res) => {
          if (res.data.weCom) {
            const query = this.$route.query;
            // 获取code参数
            this.qyhCorpId = query.qyhCorpId;
            var config = JSON.parse(res.data.weCom);
            var QYHConfig = config.filter((v) => {
              return v.qyhCorpId == this.qyhCorpId;
            })[0];
            let REDIRECT_URI = encodeURIComponent(QYHConfig.qyhComputerUrl);
            window.location.replace(
              `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${QYHConfig.qyhCorpId}&redirect_uri=${REDIRECT_URI}&response_type=code&scope=snsapi_base&state=STATE&agentid=${QYHConfig.qyhAgentId}&qyhCorpId=${QYHConfig.qyhCorpId}#wechat_redirect`
            );
          } else {
            console.error("未获取自动登录企业微信配置");
          }
        })
        .catch((err) => {
          console.error(err);
        });
    }, //获取地址栏url后的参数值
    getQyhConfigHandler() {
      // 获取的url动态
      getQyhConfig()
        .then((res) => {
          this.QYHConfig = res.data;
        })
        .catch((err) => console.log(err));
    },
    getUrlParam(key) {
      var href = window.location.href;
      var url = href.split("?");
      if (url.length <= 1) {
        return "";
      }
      var params = url[1].split("&");

      for (var i = 0; i < params.length; i++) {
        var param = params[i].split("=");
        if (key == param[0]) {
          return param[1];
        }
      }
    },
    loadWeComQrImage() {
      getQyhConfig()
        .then((res) => {
          this.QYHConfig = res.data;
          new WwLogin({
            id: "qr_login",
            appid: this.QYHConfig.qyhCorpId,
            agentid: this.QYHConfig.qyhAgentId,
            redirect_uri: encodeURIComponent(this.QYHConfig.qyhComputerUrl),
            state: "hellowecom",
            href: "",
            lang: "zh",
          });
        })
        .catch((err) => console.log(err));
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          // done();
          this.$store.commit("user/SET_AUTHORIZATIONOPEN", false);
        })
        .catch((_) => {});
    },
    closeOpen() {
      this.$store.commit("user/SET_AUTHORIZATIONOPEN", false);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>
